import { Table , Col, Row, DatePicker } from 'antd';

import React, { useState} from 'react';
import ECharts from 'echarts-for-react';
import styles from './style.less'
import SelectArea from '../components/selectArea';
import BarChart from '../components/barChart';
const SameAnalysis: React.FC = () => {

  const dataSource = [
    {
      currentTime: '00:00',
      currentEnergyConsumption: 0,
      yearOnYearDate:'00:00',
      yearCurrentEnergyConsumption: 0,
      increaseAndDecrease:0.00,
      trend:'--'
    },
    {
      currentTime: '01:00',
      currentEnergyConsumption: 0,
      yearOnYearDate:'01:00',
      yearCurrentEnergyConsumption: 0,
      increaseAndDecrease:0.00,
      trend:'--'
    },  {
      currentTime: '02:00',
      currentEnergyConsumption: 0,
      yearOnYearDate:'02:00',
      yearCurrentEnergyConsumption: 0,
      increaseAndDecrease:0.00,
      trend:'--'
    },
  ];
  const columns = [
    {
      title: '本期时间',
      dataIndex: 'currentTime'
    },
    {
      title: '本期能耗(kW·h)',
      dataIndex: 'currentEnergyConsumption',
    },
    {
      title: '同比日期',
      dataIndex: 'yearOnYearDate',
    },
    {
      title: '同比能耗(kW·h)',
      dataIndex: 'yearCurrentEnergyConsumption',
    },
    {
      title: '增减量',
      dataIndex: 'increaseAndDecrease',
    }, {
      title: '趋势',
      dataIndex: 'trend',
    },
  ];

  var dataAxis = ['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 310];
var name="同比分析";
var chart={
  dataAxis:dataAxis,
  data:data,
  name:name
}

const [charOption, setChartOption] = useState(chart);

function onChange(date, dateString) {
  console.log(date, dateString);
}




    return (
      <>
        <Row        style={{ margin: '-16px 0 '}} > 
          <Col xl={6} lg={6} md={6} sm={6} xs={6} style={{  padding: '24px 12px', borderRight: '1px solid #355fb8' }}>
            <SelectArea/>
          </Col>
          <Col xl={18} lg={18} md={18} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
            <Row gutter={[0,24]} className={styles.rightDateSelect}>
              <div  className={styles.inputBg} >
                <DatePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false} onChange={onChange} picker="year" />
              </div>
            </Row>
            <BarChart charOption={charOption} style={{ height: 400, width: '100%',marginBottom:20 }} />
            <Table dataSource={dataSource} columns={columns}  pagination={{ position: ['none','none'] }} />
          </Col>
        </Row>
      
  </>
    );
};

export default SameAnalysis;